/*
 * @(#) Myeditor.js
 *
 * <br> Copyright:  Copyright (c) 2017
 * <br>
 * <br> @author caijinhuang
 * <br> 2017-11-24 22:05:36
 */

import React from 'react';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/braft.css';
class Myeditor extends React.Component{


    state = {
        htmlContent: ''
    }


    constructor(){
        super();
        // this.refs.edit.setContent('<ul><li><strong>本周完成情况</strong></li><ul><li>需求</li><ul><li>第一点</li></ul></ul></ul><p style="text-align:start;"></p><ul><ul><li>研发</li><ul><li>第二点　</li></ul></ul></ul><p style="text-align:start;"></p><ul><ul><li>测试</li><ul><li>第三点　　</li></ul></ul></ul><p style="text-align:start;"></p><p style="text-align:start;"></p><ul><li><strong>下周计划</strong></li><ul><li>需求</li><ul><li>第一点　　</li></ul></ul></ul><p style="text-align:start;"></p><ul><ul><li>研发</li><ul><li>第二点　　</li></ul></ul></ul><p style="text-align:start;"></p><ul><ul><li>测试</li><ul><li>第三点</li></ul></ul></ul>'
        //     , "html");
    }

    /*获取富文本内容*/
    getContents(){
        return this.state.htmlContent;
    }

    render() {

        const editorProps = {
            placeholder:'',
            onHTMLChange: this.handleHTMLChange,
            viewWrapper: '.meeting',
            height: 300,
            // 增加自定义预览按钮
            extendControls: [
                {
                    type: 'split',
                },{
                    type: 'button',
                    text: '预览',
                    className: 'preview-button',
                    onClick: () => {
                        window.open().document.write(this.state.htmlContent)
                    }
                },{
                    type: 'dropdown',
                    text: <span>下拉菜单</span>,
                    component: <h1 style={{width: 200, color: '#ffffff', padding: 10, margin: 0}}>Hello World!</h1>
                },{
                    type: 'modal',
                    text: <span style={{paddingRight: 10,paddingLeft: 10}}>HTML</span>,
                    className: 'modal-button',
                    modal: {
                        title: '文本内容源码',
                        showClose: true,
                        showCancel: true,
                        showConfirm: true,
                        confirmable: true,
                        children: (
                            <div style={{width: 480, height: 400, padding: 30}}>
                                <span>{this.state.htmlContent}</span>
                            </div>
                        )
                    }
                }
            ]
        };
        return (
            <div className="meeting">
                <BraftEditor {...editorProps} ref="edit"/>
            </div>
        )
    }

    handleHTMLChange = (htmlContent) => {
        this.setState({ htmlContent });
    }
}
export default Myeditor;
